<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Title</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="./js/jquery.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<script src="./js/v2.6.10/vue.min.js"></script>
		<script src="./js/v3.2.8/vue-router.js"></script>
		<script src="./js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <ul>
          <li v-for="(classify,index) in classifyList"><a href="#">{{classify}}---{{index}}</a></li>
        </ul> -->

			<table class="table table-bordered table-striped table-hover">
				<thead>
					<tr>
						<th>id</th>
						<th>标签</th>
						<th>标题</th>
						<th>内容</th>
						<th>热度</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(goods,i) in goodsList" v-bind:key="goods.gid">
						<td v-text="goods.gid"></td>
						<td v-text="goods.gname"></td>
						<td>
							<!-- <img v-bind:src="#" height="40px"> -->
						</td>
						<td v-text="goods.gprice"></td>
						<td v-text="goods.classify"></td>
						<td>

							<button class="btn btn-danger btn-sm" @click="toMallInfo(goods.gid)">查看</button>
						</td>
					</tr>
				</tbody>
			</table>

		</div>
		<!-- 底部分页 -->
		<nav id="ff" aria-label="page navigation">
			<ul class="pagination" style="margin: 0;">
				<li @click="previousBtn" :class="pageData.page === 1?'disabled':''">
					<span aria-label="Previous">
						<span aria-hidden="true">&laquo;</span>
					</span>
				</li>
				<li v-for="index in pageData.pageTotal" :class="pageData.page === index?'active':''" :key="index"
					@click="clickPage(index)">
					<span v-text="index"></span>
				</li>
				<li @click="nextBtn" :class="pageData.page === pageData.pageTotal?'disabled':''">
					<span aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
					</span>
				</li>
			</ul>
			<label style="font-size: 25px; vertical-align: top; margin-left: 10px;">共{{pageData.pageTotal}}页
				{{pageData.total}}条数据</label>
		</nav>
		<script>
			var vueObj = new Vue({
				el: "#app",
				data: {
					classifyList: ["电脑", "手机", "服装", "箱包", "皮具", "电脑", "手机", "服装", "箱包", "皮具"],
					// 准备商品数组的变量，这里有，后面才可以赋值，vue才可以管理
					goodsList: []
				},
				// methods里面主要是自定义的函数
				methods: {
					initData() {
						// 初始化一个数组，初始化多个对象保存数据
						for (let i = 0; i < 10; i++) {
							var goods = {
								gid: i,
								gname: "黄瓜" + i,
								gimg: "img/" + i + "" + i + "" + i + ".jpg",
								gprice: 45 * (i + 1),
								classify: this.classifyList[i]
							};
							this.goodsList[i] = goods;
						}
					},


					mounted() {
						console.log("--mounted--");
						// 输出数据模型的商品列表数据
						console.log(this.goodsList);
					},

					delRow(delGoods) {
						var res = window.confirm("确定要删除编号为:" + goods.gid + "的商品吗?");
						if (res) {
							// 将要删除数据的id传递给后端的servlet
							axios.get("delGoodsServlet?gid=" + goods.gid).then(response => {
								console.log(response.data);
								if (response.data === "删除成功") {
									this.goodsList = this.goodsList.filter(goods => delGoods !== goods)
								} else {
									alert(response.data);
								}
							})
						}
					},
					//查看////////////////////////////////////////////////
					toMallInfo(id) {
						var that = this;
						console.log("id"+that.$router)
						that.$router.push("/show.html");
						// this.$router.push({
						// 	path: "./show.html",
						// 	// params: {
						// 	// 	id: this.id
						// 	// }

						// })
					}
				},
				// 钩子函数
				created() {
					console.log("--created--");
					// 执行初始化数据的函数
					this.initData();
				}

			});
			// ppppppppppppppppppppppppppppppppppppppppppppp
			new Vue({
				el: "#ff",
				data: {
					goodsList: [],
					searchData: {},
					pageData: {
						page: 1, // 当前页
						limit: 5, // 每页显示的行数
						total: 0, // 总的数据条数
						pageTotal: 0 // 总的页数
					},
					// 准备一个保存选择行数据的列表
					selectList: [],
					selectType: false // 记录当前全选按钮的状态
				},
				// 侦听器
				watch: {
					// selectList属性有变化时就会自动执行这里的函数
					selectList: function() {
						if (this.selectList.length === this.goodsList.length) {
							// 表示当前时全选
							this.selectType = true;
						} else {
							// 不是全选所有行
							this.selectType = false;
						}
					}
				},
				methods: {
					// 全选功能
					selectAll() {
						if (this.selectType) {
							this.selectList = this.goodsList;
						} else {
							this.selectList = []
						}
					},
					// 上一页
					previousBtn() {
						if (this.pageData.page > 1) {
							this.pageData.page--;
							this.initGoodsData();
						}
					},
					nextBtn() {
						if (this.pageData.page < this.pageData.pageTotal) {
							this.pageData.page++;
							this.initGoodsData();
						}
					},
					// 分页按钮的点击事件
					clickPage(currentPage) {
						// 设置当前的分页数
						this.pageData.page = currentPage;
						// 修改分页数据后 执行查询数据
						this.initGoodsData();
					},
					// 模糊查询
					searchBtn() {
						this.initGoodsData();
					},
					// 删除行
					delRow(delGoods) {
						var res = window.confirm("确定要删除编号为:" + delGoods.gid + "的商品吗?");
						if (res) {
							// 将要删除数据的id传递给后端的servlet
							axios.get("delGoodsServlet?gid=" + delGoods.gid).then(response => {
								console.log(response.data);
								if (response.data === "删除成功") {
									this.goodsList = this.goodsList.filter(goods => delGoods !== goods)
								} else {
									alert(response.data);
								}
							})
						}
					},

					initGoodsData() {
						// 通过axios封装的ajax方法来请求数据
						axios.get("showGoodsServlet", {
							// 设置参数
							params: {
								gname: this.searchData.gname,
								gprice: this.searchData.gprice,
								gstock: this.searchData.gstock,
								page: this.pageData.page,
								limit: this.pageData.limit
							}
						}).then(response => {
							console.log(response.data);
							// 将请求到的商品列表数据赋值给数据模型
							this.goodsList = response.data.data;
							// 赋值分页相关数据
							this.pageData.total = response.data.total;
							this.pageData.pageTotal = response.data.pageTotal;
						})
					}
				},
				//查看函数

				// 钩子函数，数据模型和view都加载完成后执行
				mounted() {
					this.initGoodsData();
				}
			})
		</script>
	</body>
</html>
